<script setup lang="ts">
import KeywordSetting from "~/contentScripts/views/wxt/BatchAddingProducts/components/KeywordSetting.vue";
import ZhixuanKeywordSetting from "~/contentScripts/views/wxt/BatchAddingProducts/components/ZhixuanKeywordSetting.vue";
import AutoSearchKeywords from "~/contentScripts/views/wxt/components/AutoSearchKeywords.vue";
import CustomSearchKeywords from "~/contentScripts/views/wxt/components/CustomSearchKeywords.vue";
import SearchKeywordsPackage from "~/contentScripts/views/wxt/components/SearchKeywordsPackage.vue";

// 检索关键字
import {WxtBiddingConstraintType, WxtBizCode} from "~/contentScripts/views/wxt/lib/wxtUtils";
import {InfoCircleOutlined} from "@ant-design/icons-vue";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  promotionScene: {
    type: String as PropType<WxtBiddingConstraintType>,
    default: WxtBiddingConstraintType.促进全店成交,
  },
  data: {
    type: Array as PropType<any[]>,
    default: () => []
  }
});
const emit = defineEmits([
  "update:value",
  "next",
  "prev",
]);
const data = reactive({
  autoWordList: [],
  wordList: [],
  wordPackageList: [],
  setting: {},
  zhixuanSetting: {},
});
const getProductsData = () => {
  return props.data.filter((item: any) => item.key === 'choiceProduct')[0].value;
}
const rows = computed(() => {
  return getProductsData();
});
const getPlansData = () => {
  return props.data.filter((item: any) => item.key === 'choicePlan')[0].value;
}
const plans = computed(() => {
  return getPlansData();
});
watch(() => data, () => {
  emit('update:value', data);
}, {
  deep: true,
});
</script>

<template>
  <a-row :gutter="10">
    <a-col style="width: 720px;">
      <AutoSearchKeywords :biz-code="bizCode" v-model:value="data.autoWordList" :rows="rows"/>
    </a-col>
    <a-col flex="1" style="overflow: auto;">
      <CustomSearchKeywords :biz-code="bizCode" v-model:value="data.wordList" :products="rows" :plans="plans"/>
    </a-col>
  </a-row>
  <a-divider style="margin: 10px 0;"/>
  <a-row :gutter="10">
    <a-col style="overflow: auto;" flex="1">
      <SearchKeywordsPackage :biz-code="bizCode" v-model:value="data.wordPackageList" :products="rows" :plans="plans"/>
    </a-col>
    <a-col style="width: 900px;">
      <a-row type="flex" :gutter="10">
        <a-col flex="1">
          <!--      // 关键词设置-->
          <KeywordSetting :biz-code="bizCode" v-model:value="data.setting" :plans="plans"/>
        </a-col>
        <a-col flex="1">
          <!--          // 流量智选设置-->
          <ZhixuanKeywordSetting :biz-code="bizCode" v-model:value="data.zhixuanSetting" :plans="plans"/>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
  <a-divider style="margin-top: 10px;"/>
  <a-row type="flex">
    <a-col flex="1">
    </a-col>
    <a-col>
      <a-space>
        <a-button @click="emit('prev',[])">上一步</a-button>
        <a-button type="primary" @click="()=> emit('next',[])">下一步</a-button>
      </a-space>
    </a-col>
    <a-col flex="1">
    </a-col>
  </a-row>
</template>

<style scoped>

</style>
